<template>
	<view>
		<view class="special-section" :style="{backgroundImage: 'url('+ special.h5NameImgPath+')'}"
			v-for="(special,index1) in specialList" :key="index1" @click="navToWelfareList(special)">
			<view class="s">
				<scroll-view class="scroll-wrapper" scroll-x>
					<view class="special-list">
						<view class="special-item" v-for="(item,index) in special.specialAreaGoods" :key="index">
							<!-- #ifdef MP -->
							<image :lazy-load="true" @click.stop="navToFloorItemDetail(item)"
								:src="item.goodsImage||errorImgUrl" mode="aspectFill"
								@error="item.goodsImage = errorImgUrl"></image>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<image :lazy-load="true" @click.stop="navToFloorItemDetail(item)"
								:src="item.goodsImage||errorImgUrl" mode="aspectFill"
								@error="item.goodsImage = errorImgUrl"></image>
							<!-- #endif -->
							<text class="s-item-title more-t" @click.stop="navToFloorItemDetail(item)">
								{{item.goodsName}}
							</text>
							<view class="bottom">
								<view class="left">
									<view v-if="hasLogin">
										<text class="price">￥{{item.goodsPrice?item.goodsPrice:'0'}}</text>
									</view>
									<view v-else class="price" style="color: #fa436a;padding-left: 0;">登录查看</view>
								</view>
								<view class="right">
									<image src="../../static/cart.png" @click.stop="addCart(item)"></image>
								</view>
							</view>
						</view>
						<view class="more" v-if="special.specialAreaGoods.length == 6">
							<text>查看更多</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sepcial-section",
		props: {
			specialList: {
				type: Array,
				default: () => []
			},
			hasLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			navToFloorItemDetail(item) {
				this.$emit('detail', item)
			},
			navToWelfareList(item) {
				let id = item.id;
				let targetId = item.targetId
				let flag = item.type == 1 ? 1 : 0
				uni.navigateTo({
					url: `/pages/activity/activity?id=${id}&targetId=${targetId}&flag=${flag}`
				})
			},
			addCart(item){
				this.$emit('add',item)
			}
		}
	}
</script>

<style lang="scss">
	.special-section {
		position: relative;
		padding-top: 126px;
		background-repeat: no-repeat;
		background-size: 100%;

		.bg {
			width: 100%;
		}

		.s {
			padding-left: 0rpx;
		}

		.scroll-wrapper {
			background-color: #fff;
			white-space: nowrap;
			padding: 10rpx;
			padding-right: 0;
			width: 100%;
			padding-right: 20rpx;
			box-shadow: 4rpx 4rpx 20rpx 4rpx #f3f3f3;
		}

		.special-list {
			display: flex;
			align-items: center;
			padding: 10rpx;
			width: 100%;
			position: relative;

			.special-item {
				margin-right: 10rpx;
				padding: 10rpx;
				color: $font-color-dark;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: auto;

				.s-item-title {
					max-width: 180rpx;
					width: 180rpx;
					min-height: 78rpx;
					color: $font-color-dark;
					font-size: $font-base;
					white-space: normal;
					text-align: left;
				}

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 6upx;
					margin-bottom: 6rpx;
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						flex-direction: column;

						.price {
							text-align: left;
							display: block;
							font-size: 13px;
							color: #646464;
						}
					}

					.right {
						display: flex;
						align-items: center;

						image {
							width: 75rpx;
							height: 70rpx;
						}
					}
				}
			}

			.more {
				width: 180rpx;
				flex-shrink: 0;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				color: $font-color-disabled;
				border: 1px dashed $font-color-disabled;
				height: 320rpx;
				font-size: 14px;
				display: flex;
				align-items: center;

				text {
					width: 100%;
					text-align: center;
					font-size: 14px;
				}
			}

		}
	}
</style>
